<!--
* @description:入库管理
* @fileName: StockManagement
* @author:孟帅龙
* @date:2021-1-14
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 入库管理 -->
    <!-- 查询条件 -->
    <div class="rkglselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="货物名称：">
          <el-input
            v-model="GoodsNamen"
            placeholder="请输入货物名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="材质：">
          <el-select v-model="Texture" placeholder="请选择材质">
            <el-option
              v-for="item in caizhi"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="国家：">
          <el-select
            v-model="Nationw"
            placeholder="请选择国家"
            @change="loadProvince"
          >
            <el-option
              v-for="item in country"
              :key="item.value"
              :label="item.CountryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份：">
          <el-select v-model="Province" placeholder="请选择省份">
            <el-option
              v-for="item in province"
              :key="item.value"
              :label="item.CountryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式：">
          <el-select v-model="PaymentType" placeholder="请选择支付方式">
            <el-option
              v-for="item in zhifu"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记人：">
          <el-input v-model="Registrant" placeholder="请输入登记人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="loadReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="goBack">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="rkgltable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="GoodsNamen" label="货物名称"> </el-table-column>
        <el-table-column prop="CName" label="类型"> </el-table-column>
        <el-table-column prop="DName" label="材质"> </el-table-column>
        <el-table-column prop="Specification" label="规格"> </el-table-column>
        <el-table-column label="产地" width="150">
          <template slot-scope="scope">
            {{ scope.row.EName }}——>{{ scope.row.FName }}
          </template>
        </el-table-column>
        <el-table-column prop="Numbers" label="数量"> </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            {{ scope.row.GrossAmountn / scope.row.Numbers }}
          </template>
        </el-table-column>
        <el-table-column prop="BName" label="支付方式"> </el-table-column>
        <el-table-column prop="GrossAmountn" label="采购金额"></el-table-column>
        <el-table-column prop="Registrant" label="登记人"></el-table-column>
        <el-table-column prop="Remarkm" label="备注"> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.EstablishTimez.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdateCheck(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="rkglpage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号：" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.NewLibraryNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="货物名称：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.GoodsNamen"
            placeholder="请输入货物名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付方式：" prop="PaymentType">
          <el-select
            v-model="ruleForm.PaymentType"
            placeholder="请选择支付方式"
          >
            <el-option
              v-for="item in zhifu"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型：" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.Typey" placeholder="请选择类型">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质：" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.Texture" placeholder="请选择材质">
            <el-option
              v-for="item in caizhi"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Specification"
            placeholder="请输入规格"
          ></el-input>
        </el-form-item>
        <el-form-item label="国家：" :label-width="formLabelWidth">
          <el-select
            v-model="ruleForm.Nationw"
            placeholder="请选择国家"
            @change="loadProvinces"
          >
            <el-option
              v-for="item in countrys"
              :key="item.value"
              :label="item.CountryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份：" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.Province" placeholder="请选择省/州">
            <el-option
              v-for="item in provinces"
              :key="item.value"
              :label="item.CountryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量：" :label-width="formLabelWidth">
          <el-input
            v-model="ruleForm.Numbers"
            placeholder="请输入数值"
          ></el-input>
        </el-form-item>
        <el-form-item label="总金额：" prop="GrossAmountn">
          <el-input
            v-model="ruleForm.GrossAmountn"
            placeholder="请输入总金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="登记人：" prop="Registrant">
          <el-input
            v-model="ruleForm.Registrant"
            placeholder="请输入登记人"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="ruleForm.Remarkm"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      GoodsNamen: "",
      Texture: 0,
      Nationw: 0,
      Province: 0,
      Registrant: "",
      PaymentType: 0,
      //全选非全选数组
      ids: [],
      ruleForm: {
        NewLibraryNumber: "",
        GoodsNamen: "",
        PaymentType: "",
        Typey: "",
        Texture: "",
        Specification: "",
        Nationw: "",
        Province: "",
        Numbers: "",
        Remarkm: "",
        GrossAmountn: "",
        Registrant: "",
      },
      //编辑模态框
      dialogFormVisible: false,
      formLabelWidth: "120px",
      caizhi: [],
      zhifu: [],
      type:[],
      country: [],
      province: [],
      countrys: [],
      provinces: [],
    };
  },
  methods: {
    //跳转添加页面
    goBack() {
      this.$router.push("/TheNewLibrary");
    },
    //查询显示分页
    loadData() {
      this.$axios
        .get("https://localhost:44399/api/app/ru-ku/new-library-page-show", {
          //?GoodsNamen=1&Texture=1&Nationw=1&Province=1&PaymentType=1&Registrant=1&pageindex=1&pagesize=3
          params: {
            GoodsNamen: this.GoodsNamen,
            Texture: this.Texture,
            Nationw: this.Nationw,
            Province: this.Province,
            PaymentType: this.PaymentType,
            Registrant: this.Registrant,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    //重置
    loadReset() {
      this.GoodsNamen = "";
      this.Texture = 0;
      this.Nationw = 0;
      this.Province = 0;
      this.Registrant = "";
      this.PaymentType = 0;
      this.loadData();
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/ru-ku/" + row.Id + "/new-library"
            )
            .then((res) => {
              if (res.data > 0) {
                this.$message.success("删除成功");
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleBatchDelete() {
      if (this.ids.length == 0) {
        this.$message.warning("请至少选择一条操作的数据");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/ru-ku/batch-new-library?ids=" +
                this.ids.toString()
            )
            .then((res) => {
              if (res.data > 0) {
                this.$message.success("批量删除成功");
                this.loadData();
              } else {
                this.$message.error("批量删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //编辑
    handleEdit() {
      this.$axios
        .put(
          "https://localhost:44399/api/app/ru-ku/update-new-library",
          this.ruleForm
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //详情
    handleUpdateCheck(row) {
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    loadDictionary() {
      this.$axios
        .get("https://localhost:44399/api/app/oil-cost/bind")
        .then((res) => {
          let d = res.data.PageData;
          this.caizhi = d.filter((u) => {
            return u.DictionaryType == "Texture";
          });
          this.zhifu = d.filter((u) => {
            return u.DictionaryType == "youfei_zf";
          });
          this.type = d.filter((u) => {
            return u.DictionaryType == "Typey";
          });
          this.caizhi.unshift({ Id: 0, DictionaryName: "请选择" });
          this.zhifu.unshift({ Id: 0, DictionaryName: "请选择" });
        });
    },
    loadCountry() {
      this.$axios
        .get("https://localhost:44399/api/app/country/" + 0 + "/country-show")
        .then((res) => {
          this.country = res.data.PageData;
          this.country.unshift({ Id: 0, CountryName: "请选择" });
        });
    },
    loadProvince() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/country/" +
            this.Nationw +
            "/country-show"
        )
        .then((res) => {
          this.province = res.data.PageData;
          this.province.unshift({ Id: 0, CountryName: "请选择" });
        });
    },
    loadCountrys() {
      this.$axios
        .get("https://localhost:44399/api/app/country/" + 0 + "/country-show")
        .then((res) => {
          this.countrys = res.data.PageData;
        });
    },
    loadProvinces() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/country/" +
            this.ruleForm.Nationw +
            "/country-show"
        )
        .then((res) => {
          this.provinces = res.data.PageData;
        });
    },
  },
  created() {
    this.loadData();
    this.loadDictionary();
    this.loadCountry();
    this.loadCountrys();
  },
};
</script>

<style>
.cgselect {
  margin: 10px;
}
.cgtable {
  margin: 10px;
}
.cgpage {
  margin: 10px;
}
</style>